import React, { useState } from 'react';
import { Button, Input, Inter, V } from '@/components';
import { ScrollView } from 'react-native-gesture-handler';
import { Ionicons } from '@expo/vector-icons';

import { StyleSheet } from 'react-native';
import { Nav } from '@/modules';

interface RegisterProps {
  isLoading: boolean;
  onRegister: () => void;
}
export const Register = (props: RegisterProps) => {
  const { isLoading, onRegister } = props;
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const handleBackToLogin = () => {
    Nav.navigate('Login');
  };
  const handleRegister = () => {
    // console.log(username, email, password, confirmPassword);
  };

  const InputItem = (info: { icon: any; input: React.ReactNode }) => {
    return (
      <V
        f
        row
        ai="c"
        bwb={0.5}
        bcb="#ddd"
        br={8}
        p={12}
        mb={16}
        pl={12}
        pr="12"
      >
        <Ionicons
          name={info.icon}
          size={20}
          color="#666"
          style={styles.inputIcon}
        />
        {info.input}
      </V>
    );
  };

  return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
      <V ai="c" mb={40}>
        <Inter fs="28" fw="bold" c="#333" mb="8">
          创建账户
        </Inter>
        <Inter fs="16" c="#666" ta="center">
          加入我们，开始管理您的费用
        </Inter>
      </V>
      <V w="100%">
        <InputItem
          icon="person-outline"
          input={
            <Input
              style={styles.input}
              placeholder="用户名"
              value={username}
              onChangeText={setUsername}
              autoCapitalize="none"
              autoCorrect={false}
            />
          }
        />
        <InputItem
          icon="mail-outline"
          input={
            <Input
              style={styles.input}
              placeholder="邮箱地址"
              value={email}
              onChangeText={setEmail}
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
            />
          }
        />
        <InputItem
          icon="lock-closed-outline"
          input={
            <Input
              style={styles.input}
              placeholder="密码"
              value={password}
              onChangeText={setPassword}
              secureTextEntry={!showPassword}
              autoCapitalize="none"
            />
          }
        />
        <InputItem
          icon="lock-closed-outline"
          input={
            <Input
              style={styles.input}
              placeholder="确认密码"
              value={confirmPassword}
              onChangeText={setConfirmPassword}
              secureTextEntry={!showConfirmPassword}
              autoCapitalize="none"
            />
          }
        />
        <Button
          title="注册"
          onPress={handleRegister}
          variant="primary"
          size="medium"
          loading={isLoading}
        />
        <V row ai="c" ml="20" mr="20" mt="16">
          <V f h="1" bg="#ddd" />
          <Inter fs="14" c="#666" ml="16" mr="16">
            或者
          </Inter>
          <V f h="1" bg="#ddd" />
        </V>
        <V mt="16">
          <Button
            title="已有账户？登录"
            onPress={handleBackToLogin}
            variant="outline"
            size="medium"
          />
        </V>
      </V>
    </ScrollView>
  );
};
const styles = StyleSheet.create({
  scrollContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  header: {
    alignItems: 'center',
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
  form: {
    width: '100%',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    marginBottom: 16,
    paddingHorizontal: 12,
    backgroundColor: '#f9f9f9',
  },
  inputIcon: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    height: 50,
    fontSize: 14,
    color: '#333',
  },
  passwordToggle: {
    padding: 8,
  },
  registerButton: {
    backgroundColor: '#0ea5e9',
    borderRadius: 8,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
  },
  registerButtonDisabled: {
    backgroundColor: '#ccc',
  },
  registerButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 20,
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: '#ddd',
  },
  dividerText: {
    marginHorizontal: 16,
    color: '#666',
    fontSize: 14,
  },
  loginButton: {
    borderWidth: 1,
    borderColor: '#0ea5e9',
    borderRadius: 8,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginButtonText: {
    color: '#0ea5e9',
    fontSize: 16,
    fontWeight: '600',
  },
});
